<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入依赖包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
          <h1>{{msg}}</h1>
          <h2>{{haha}}</h2>
    </div>
</body>

</html>
<script>
      //创建VM
      //响应式数据：数据发生变化，视图根着变化
      let VM = new Vue({
         //VM与那个容器进行关联   
         //响应式数据声明的地方,在data当中声明的数据才是响应式的  
          data:{
              msg:'我爱你北京',
              //变更|替换   
              hobby:['吃饭','睡觉',"打豆豆"]
          }
      }).$mount('#app');
    //   //MSG响应式数据，当数据发生变化的时候，页面发生变化
    //   VM.msg = '我爱祖国';
    //   //VM是一个对象，通过点语法动态添加新的属性
    //   //haha并非响应式属性
    //   VM.haha = "haha";
</script>